<ion-header [translucent]="true">
    <ion-toolbar>
        <ion-buttons slot="primary">
            <ion-button fill="clear" color="medium" (click)="dismiss()">
                <ion-icon name="close-outline" slot="icon-only"></ion-icon>
            </ion-button>
        </ion-buttons>
        <ion-title>
            {{translate("ADD_TEMPLATE")}}
        </ion-title>
    </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
    <ion-header collapse="condense">
        <ion-toolbar>
            <ion-title size="large">{{translate("ADD_TEMPLATE")}}</ion-title>
        </ion-toolbar>
    </ion-header>


    <ion-item>
        <ion-label color="primary" position="stacked">{{translate("TEMPLATE_NAME")}}</ion-label>
        <ion-input [(ngModel)]="templateName"></ion-input>
    </ion-item>

    <div *ngFor="let item of templateItems;let i = index">
        <ion-item-divider>
            <ion-label>#{{i + 1}}</ion-label>
            <ion-button size="small" slot="end" color="danger" (click)="removeItem(i)">{{translate("REMOVE")}}#{{i + 1}}</ion-button>
        </ion-item-divider>
        <ion-item>
            <ion-label color="primary">{{translate("TEMPLATE_ITEM_TYPE")}}</ion-label>
            <ion-select [(ngModel)]="item.type" interface="popover">
                <ion-select-option value="text">{{translate("TEXT")}}</ion-select-option>
                <!-- <ion-select-option value="barcode">{{translate("BARCODE")}}</ion-select-option> -->
                <ion-select-option value="qrcode">{{translate("QRCODE")}}</ion-select-option>
                <ion-select-option value="feed">{{translate("FEED")}}</ion-select-option>
            </ion-select>
        </ion-item>

        <ion-item *ngIf="item.type !== 'feed'">
            <ion-label color="primary">{{translate("ALIGN_TYPE")}}</ion-label>
            <ion-select [(ngModel)]="item.align" interface="popover">
                <ion-select-option value="left">{{translate("ALIGN_LEFT")}}</ion-select-option>
                <ion-select-option value="center">{{translate("ALIGN_CENTER")}}</ion-select-option>
                <ion-select-option value="right">{{translate("ALIGN_RIGHT")}}</ion-select-option>
            </ion-select>
        </ion-item>

        <ion-item *ngIf="item.type !== 'feed'">
            <ion-label color="primary" position="stacked">{{translate("LABEL")}}</ion-label>
            <ion-input [(ngModel)]="item.label"></ion-input>
        </ion-item>

        <ion-item *ngIf="item.type === 'text'">
            <ion-label color="primary">{{translate("BOLD")}}</ion-label>
            <ion-checkbox slot="end" [(ngModel)]="item.bold"></ion-checkbox>
        </ion-item>
        <ion-item *ngIf="item.type === 'text'">
            <ion-label color="primary">{{translate("DOUBLE_HEIGHT")}}</ion-label>
            <ion-checkbox slot="end" [(ngModel)]="item.doubleHeight"></ion-checkbox>
        </ion-item>
        <ion-item *ngIf="item.type === 'text'">
            <ion-label color="primary">{{translate("DOUBLE_WIDTH")}}</ion-label>
            <ion-checkbox slot="end" [(ngModel)]="item.doubleWidth"></ion-checkbox>
        </ion-item>

        <ion-item *ngIf="item.type === 'feed'">
            <ion-label color="primary" position="stacked">{{translate("LINES")}}</ion-label>
            <ion-input type="tel" [(ngModel)]="item.lines"></ion-input>
        </ion-item>

        <ion-item *ngIf="item.type === 'barcode'">
            <ion-label color="primary" position="stacked">{{translate("SIZE")}}</ion-label>
            <ion-range min="20" max="80" step="1" pin [(ngModel)]="item.barcodeSize">
                <ion-icon size="small" slot="start" name="barcode-outline"></ion-icon>
                <ion-icon slot="end" name="barcode-outline"></ion-icon>
            </ion-range>
        </ion-item>

        <ion-item *ngIf="item.type === 'qrcode'">
            <ion-label color="primary" position="stacked">{{translate("SIZE")}}</ion-label>
            <ion-range min="1" max="16" step="1" pin [(ngModel)]="item.qrcodeSize">
                <ion-icon size="small" slot="start" name="qr-code-outline"></ion-icon>
                <ion-icon slot="end" name="qr-code-outline"></ion-icon>
            </ion-range>
        </ion-item>

    </div>

    <ion-item-divider>
    </ion-item-divider>

    <ion-item button (click)="addItem()" detailIcon="add">
        <ion-label color="primary">{{translate("ADD_ITEM")}}</ion-label>
    </ion-item>

</ion-content>

<ion-footer>
    <ion-toolbar class="ion-no-padding">
        <ion-grid>
            <ion-row>
                <ion-col size="6">
                    <ion-button color="primary" expand="block" (click)="print()">
                        {{translate("PRINT_TEST")}}
                    </ion-button>
                </ion-col>
                <ion-col size="6">
                    <ion-button color="success" expand="block" (click)="save()">
                        {{translate("SAVE")}}
                    </ion-button>
                </ion-col>
            </ion-row>
        </ion-grid>
    </ion-toolbar>
</ion-footer>